<template>
	<view class="shade animate__animated animate__fadeIn"
		v-if="indexStore.data.advertisement_show && bannerList.length > 0">
		<view class="banner animate__animated animate__bounceIn">
			<cl-banner :list="bannerList" radius="0" height="700rpx" :indicatorDots="true" @tohref="tohref"></cl-banner>
			<image src="/static/images/close.png" mode="aspectFill" class="close"
				@click="indexStore.data.advertisement_show = false"></image>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import img from "@/static/images/guanggao.png";
import { useIndexStore } from "../store/index";
import { useCool } from "/@/cool";
import type { forEach } from "lodash-es";
const { service, router, refs, setRefs, storage, upload } = useCool();
const indexStore = useIndexStore();
const bannerList = ref([]);
onMounted(() => {
	getAdv();
});

const getAdv = async () => {
	const data = await service.api.getAdv();
	var list = []
	data.result.forEach((v: any, i: any) => {
		list.push({
			url: v.mediaUrl,
			href: v.jumpUrl
		})
	})
	bannerList.value = list
};

const tohref = (e: any) => {
	if (e.href) {
		router.push(e.href)
	}
}
</script>
<style lang="scss" scoped>
.shade {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 19999999;

	:deep(.cl-banner) {
		width: 580rpx !important;
		position: fixed;
		left: 50%;
		margin-left: -290rpx;
		top: 0rpx;
		border-radius: 20rpx;
		overflow: hidden;

		.uni-swiper-dot {
			background: #fff;
			opacity: 1;
			width: 12rpx;
			height: 12rpx;
		}

		.uni-swiper-dot-active {
			width: 42rpx;
			height: 12rpx;
			background: #ffffff;
			border-radius: 6rpx;
		}
	}

	.banner {
		position: relative;
		width: 580rpx !important;
		left: 50%;
		margin-left: -290rpx;
		top: 450rpx;

		.close {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}
	}
}
</style>
